<!DOCTYPE html>
<!--[if lt IE 7]>  <html class="ie ie6 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 7]>     <html class="ie ie7 lte9 lte8 lte7 no-js"> <![endif]-->
<!--[if IE 8]>     <html class="ie ie8 lte9 lte8 no-js">      <![endif]-->
<!--[if IE 9]>     <html class="ie ie9 lte9 no-js">           <![endif]-->
<!--[if gt IE 9]>  <html class="no-js">                       <![endif]-->
<!--[if !IE]><!--> <html class="no-js">                       <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>ELITE - A Powerfull Responsive Admin Theme</title>
    
	<!-- 
    ***************************************
    DEMO - DEMO - DEMO - DEMO - DEMO - DEMO
    
    This demo is modifyed to perfom 
    better(as our servers anr't that fast)
    Most cusom files are compressed and 
    are not readable.
    ***************************************
    -->
    
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.html">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/mobile/apple-touch-icon-114x114.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/mobile/apple-touch-icon-72x72.png" />
    <link rel="apple-touch-icon-precomposed" href="images/mobile/apple-touch-icon.png" />
    <link rel="shortcut icon" href="images/apple-touch-icon.html" />
    <link rel="apple-touch-startup-image" media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)" href="images/mobile/splash-320x460.png" />
    <link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/mobile/splash-640x920-retina.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="images/mobile/splash-768x1004.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="images/mobile/splash-1024x748.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 1536px) and (orientation: portrait)" href="images/mobile/splash-1536x2008-retina.png" />
    <link rel="apple-touch-startup-image" media="(min-device-width: 2048px) and (orientation: landscape)" href="images/mobile/splash-2048x1496-retina.png" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="HandheldFriendly" content="true"/>   
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <script src="js/mobiledevices.js"></script>

    <meta name="application-name" content="Elite Admin Skin">
    <meta name="msapplication-tooltip" content="Cross-platform admin skin.">
    <meta name="msapplication-starturl" content="http://themes.creativemilk.net/elite/html/index.html">
    <meta name="msapplication-task" content="name=Home;action-uri=http://themes.creativemilk.net/elite/html/index.html;icon-uri=http://themes.creativemilk.net/elite/html/images/favicons/favicon.ico">
    <meta http-equiv="cleartype" content="on" /> 
    
    <!--[if lt IE 8]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
    <![endif]-->

    <link rel="stylesheet" href="css/framework.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="css/ui/jquery.ui.base.css"/>
    <link rel="stylesheet" href="css/theme/darkblue.css" id="themesheet"/>
	<!--[if IE 7]>
	<link rel="stylesheet" href="css/destroy-ie6-ie7.css"/>
    <![endif]-->
    
    <link rel="shortcut icon" href="images/favicons/favicon.ico" />

    <script src="../../ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>!window.jQuery && document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
    <script src="../../code.jquery.com/ui/1.8.22/jquery-ui.min.js"></script>
    <script>!window.jQueryUI && document.write('<script src="js/jquery-ui-1.8.22.min.js"><\/script>')</script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <script src="js/jquery.mousewheel.min.js"></script>
	<script src="js/jquery.ui.spinner.js"></script>            
    <script src="js/tipsy.js"></script>                       
    <script src="js/treeview.js"></script>                      
    <script src="js/fullcalendar.min.js"></script>               
    <script src="js/selectToUISlider.jQuery.js"></script>       
    <script src="js/jquery.contextMenu.js"></script>            
    <script src="js/elfinder.min.js"></script>                  
    <script src="js/autogrow-textarea.js"></script>              
    <script src="js/textarearesizer.min.js"></script>
    <script src="wysiwyghtml5/parser_rules/advanced.js"></script>
	<script src="wysiwyghtml5/dist/wysihtml5-0.3.0.js"></script>                    
    <script src="js/jquery.colorbox-min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/jquery.maskedinput-1.3.min.js"></script> 
    <script src="js/json2.js"></script>
    <script src="audiojs/audiojs/audio.min.js"></script> 
    <script src="js/e_styleswitcher.1.0.min.js"></script>                 
    <script src="js/main.js"></script>  
       
    <!-- // HTML5/CSS3 support // -->

    <script src="js/modernizr.min.js"></script>
                
</head>
<body class="layout_fluid layout_responsive"> 

    <!-- this part can be removed, its just here 
         to let you switch between styles and layout sizes -->
    <div id="e-styleswitcher">
        <div class="e-styleswitcher-inner">
            <div class="e-styleswitcher-arrow"><img src="images/icons/plix-16/white/arrow-right-16.png" alt="" /></div>
            <div class="box">
            	<h4>Styles</h4>
                <select id="choose-styling">
                	<option value="strangeblue">Strange blue</option>
                    <option value="black">Black</option>
                    <option value="darkblue">Dark blue</option>
                    <option value="lightgrey">Light grey</option>
                </select>
            </div>    
            <div class="box">
            	<h4>Layout sizes</h4>                
                <select id="set-layout-size">
                	<option value="layout_fluid">fluid</option>
                    <option value="layout_768">768</option>
                    <option value="layout_960">960</option>
                    <option value="layout_1024">1024</option>
                    <option value="layout_1200">1200</option>
                    <option value="layout_1600">1600</option>
                </select>
            </div> 
            <div class="box">
            	<h4>Responsive</h4>                
                <select id="set-layout-responsive">
                	<option value="layout_responsive">yes</option>
                    <option value="">no</option>
                </select>
            </div>
            <div class="box">
            	<h4>Get theme</h4>                
                <select id="get-theme">
                	<option value="">no</option>
                    <option value="yes">yes</option>
                </select>
            </div>                         
        </div>
    </div>
  
	<div id="container">
    
        <!-- MAIN HEADER -->
                
        <header id="header">
        	<div id="header-border">
                <div id="header-inner">
                
                    <div class="left">
                        <a href="index.html" id="logo">ELITE</a>
                    </div><!-- End .left -->
                    
                    <div class="right">
                        <!-- eMenu -->
                        <nav>
                            <ul class="e-splitmenu" id="header-menu">
                                <li><span>Menu</span><a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="stats2-10 plix-10"></span> Stats</a></li>
                                            <li><a href="index.html"><span class="lock-10 plix-10"></span> Security</a></li>
                                            <li><a href="index.html"><span class="download-10 plix-10"></span> Downloads</a></li>
                                        </ul>                                      
                                    </div>                               

                                </li>
                                <li><span>Settings</span><a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="home-10 plix-10"></span> Basic Settings</a></li>
                                            <li><a href="index.html"><span class="settings-10 plix-10"></span> Site Settings</a></li>
                                            <li><a href="index.html"><span class="comment-10 plix-10"></span> User Settings</a></li>
                                            <li><a href="index.html"><span class="bookmark-10 plix-10"></span> Server Settings</a></li>
                                        </ul>                                      
                                    </div>
                                    
                                </li>
                        		<li class="e-menu-profile">
                                    <a href="javascript:void(0);"><span class="arrow-down-10 plix-10"></span></a> 
                                    <img src="images/avatar.jpg" alt=""/>
                                    
                                    <div>
                                        <ul>
                                            <li><a href="index.html"><span class="mail-10 plix-10"></span> Inbox</a></li>
                                            <li><a href="index.html"><span class="upload-10 plix-10"></span> Settings</a></li>
                                            <li><a href="index.html"><span class="info-10 plix-10"></span> Logout</a></li>
                                        </ul>                                      
                                    </div> 
                                            
                                </li>
                            </ul>
                        </nav>
                    </div><!-- End .right --> 
                    
                </div><!-- End #header-border --> 
            </div><!-- End #header-inner -->  
                
		</header><!-- End #header -->
        
        <!-- CONTENT -->
                 
        <div id="content">
            <div id="content-border">
            
                <!-- CONTENT HEADER -->
                
                <header id="content-header">
                    <div class="left">
                    	<a href="javascript:void(0);" id="toggle-mainmenu" class="button-icon tip-s" title="Toggle Main Menu"><span class="arrow-up-10 plix-10"></span></a>
                        
                        <!-- main search form -->
                        <form method="post" id="mainsearch">
                            <input type="text" placeholder="Live search..." name="" autocomplete="off"/>
                            <input type="submit" value="" />
                        </form>
                    </div><!-- End .left --> 
                    <div class="right">
                    	<!-- sidebar switch -->
                    	<a href="javascript:void(0);" id="toggle-sidebar" class="button-icon tip-s" title="Switch Main Menu"><span class="arrow-left-10 plix-10"></span></a>
                        
                        <!-- breadcrumbs -->
                        <nav id="main-breadcrumbs">
                            <ul>
                                <li class="bc-tab-first">
                                    <a href="index.html">Home</a>
                                </li>
                                <li>
                                    <a href="documentation.html">Documentation</a>
                                </li>
                                <li class="bc-tab-last">Forms</li>
                            </ul>          
                        </nav>
                        
                        <!-- demo dialog button -->
                        <a href="javascript:void(0);" id="open-main-dialog" class="button-text-icon tip-w" title="Some tooltip pointing right"><span class="fullscreen-10 plix-10"></span> Dialog</a>
                        
                        <!-- the main page dialog -->
                        <div id="main-page-dialog" title="Welcome to Elite" style="display:none">
                        <img src="images/jquery-ui-logo.png" alt="" class="dummy-img-dialog"/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet est et mauris ornare lobortis dignissim quis massa. Donec ullamcorper turpis ac lectus semper commodo. Mauris tincidunt, erat et tempor interdum, dolor metus consectetur dui, eu accumsan augue augue a erat. Fusce justo nibh, tristique vitae pretium ut, venenatis nec felis. Curabitur congue tempor ultricies. Proin quis libero dignissim neque posuere pharetra vel adipiscing massa. Sed sit amet erat ac arcu sodales aliquam. Nam tellus sapien, ornare in tincidunt vel, ultricies id quam.
						</div>
                        
                        <!-- widgets controls -->
                        <div id="widgets-controls">
							<ul class="e-splitmenu" id="page-actions">
                                <li><span>Actions</span><a href="javascript:void(0);"><span class="settings-10 plix-10"></span></a>
                                
                                     <div>
                                        <ul>
                                            <li><a href="index.html"><span class="pencil-10 plix-10"></span>Edit</a></li>
                                            <li><a href="index.html"><span class="document-10 plix-10"></span>View</a></li>
                                            <li><a href="index.html"><span class="trashcan-10 plix-10"></span> Delete</a></li>
                                        </ul>                                      
                                    </div>                               

                                </li>
                        	</ul>                        
                        </div> 
                    </div><!-- End .right -->                
                
				</header><!-- End #content-header --> 
                                
                <div id="content-inner">
                    
                    <!-- SIDEBAR -->
                    
                    <aside>
                    
                    	<!-- SIDEBAR PROFILE -->
                        
                    	<div id="sidebar-profile">
                            <div id="main-avatar">
                            	<span class="indicator">38</span>
                                <img src="images/avatar.jpg" alt=""/>
                            </div>
                            <div id="profile-info">
                                <div>
                                    <a href="javascript:void(0);"><b>Administrator</b></a>
                                    <a href="javascript:void(0);">Profile settings</a>
                                    <a href="javascript:void(0);">Server settings</a>
                                    <a href="javascript:void(0);">Logout</a>
                                </div>
                            </div>
                        </div>
                        
                        <!-- MAIN MENU -->
                        
                        <nav id="main-menu">
                            <ul>
                                <li><a href="index.html"><span class="home-16 plix-16"></span> Dashboard</a></li>
                                <li class="page-active menu-open no-mobile"><a href="documentation.html"><span class="note-16 plix-16"></span> Documentation</a>
                                
                                    <ul>
                                    	<li><a href="doc-accordion.html">Accordion</a></li> 
                                    	<li><a href="doc-breadcrumbs.html">Breadcrumbs</a></li>
                                        <li><a href="doc-buttons.html">Buttons</a></li>
                                        <li><a href="doc-calendar.html">Calendar</a></li>
                                        <li><a href="doc-charts.html">Charts</a></li>
                                        <li><a href="doc-dialogs.html">Dialogs</a></li>
                                        <li><a href="doc-editors.html">Editors</a></li>
                                        <li><a href="doc-extra.html">Extra</a></li>
                                        <li><a href="doc-fileexplore.html">File Explore</a></li>
                                        <li class="page-active"><a href="doc-forms.html">Forms</a></li>
                                        <li><a href="doc-grid.html">Grid</a></li>
                                        <li><a href="doc-icons.html">Icons</a></li>
                                        <li><a href="doc-listsblocks.html">Lists &amp; Blocks</a></li>
                                        <li><a href="doc-media.html">Media</a></li>
                                        <li><a href="doc-menus.html">Menus</a></li>
                                        <li><a href="doc-misc.html">Misc</a></li>
                                        <li><a href="doc-search.html">Search</a></li>
                                        <li><a href="doc-tables.html">Tables</a></li>
                                        <li><a href="doc-tabs.html">Tabs</a></li>
                                        <li><a href="doc-toolbars.html">Toolbars</a></li> 
                                        <li><a href="doc-widgets.html">Widgets</a></li>                                         
                                    </ul> 
                                                                   
                                </li>
                                <li><a href="calendar.html"><span class="calendar-16 plix-16"></span>Calendar<span class="color-indicator">28</span></a></li>
                                <li><a href="javascript:void(0);"><span class="postcard-16 plix-16"></span> Form Elements <span class="button-icon"><span class="plus-10 plix-10"></span></span></a>

                                    <ul>
                                    	<li><a href="editors.html">Editors</a></li>
                                    	<li><a href="forms.html">Forms</a></li>
                                        <li><a href="login.html">Login form 1</a></li>
                                        <li><a href="login-2.html">Login form 2</a></li>
                                        <li><a href="login-3.html">Login form 3</a></li>
                                        <li><a href="login-4.html">Login form 4</a></li>
                                        <li><a href="search.html">Search</a></li>
                                        <li><a href="wizard.html">Wizard</a></li>                                        
                                    </ul>
                                
                                </li>
                                <li><a href="media.html"><span class="image-16 plix-16"></span> Media</a></li>
                                <li><a href="planning.html"><span class="pencil-16 plix-16"></span> Planning</a></li>
                                <li><a href="maps.html"><span class="map-16 plix-16"></span> Google Maps <span class="indicator tip-w" title="Some tip goes here">tooltip</span></a></li>
                                <li><a href="fileexplore.html"><span class="folder-16 plix-16"></span> File Explore</a></li> 
                                <li><a href="javascript:void(0);"><span class="warning-16 plix-16"></span> Error pages<span class="button-icon"><span class="plus-10 plix-10"></span></span></a>

                                    <ul>
                                    	<li><a href="400.html">400</a></li>
                                    	<li><a href="401.html">401</a></li>
                                        <li><a href="403.html">403</a></li>
                                        <li><a href="404.html">404</a></li>
                                        <li><a href="500.html">500</a></li>
                                        <li><a href="503.html">503</a></li>                                         
                                    </ul>
                                
                                </li>                                                               
                                <li><a href="widgets.html"><span class="rows4-16 plix-16"></span> Widgets</a></li>
                                <li><a href="tables.html"><span class="cells-16 plix-16"></span> Tables</a></li>
                                <li><a href="charts.html"><span class="stats2-16 plix-16"></span> Charts </a></li>
                                <li><a href="javascript:void(0);"><span class="controls-16 plix-16"></span> Interface Elements <span class="button-icon"><span class="plus-10 plix-10"></span></span></a>
                                
                                    <ul>
                                      	<li><a href="accordion.html">Accordion</a></li>                                        
                                        <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
                                        <li><a href="buttons.html">Buttons</a></li>
                                        <li><a href="dialogs.html">Dialogs</a></li>
                                        <li><a href="icons.html">Icons</a></li>
                                        <li><a href="listsblocks.html">Lists &amp; Blocks</a></li>
                                        <li><a href="menus.html">Menus</a></li>
                                        <li><a href="misc.html">Misc</a></li>
                                        <li><a href="tabs.html">Tabs</a></li>
                                        <li><a href="toolbars.html">Toolbars</a></li>
                                    </ul>           
                                                           
                                </li>
                                <li><a href="grid.html"><span class="layout3-16 plix-16"></span> Grid <span class="indicator">960</span></a></li>
                            </ul>
                        </nav>                      
                    </aside>
                    
                    <!-- sidebar meta stats -->
                    <div id="sidebar-meta">
                    	<div id="sidebar-meta-inner">
                        	<div>
                                <p class="left">Space</p> 
                                <p class="right">4,551 MB / 10 GB</p>
                            </div>
                            <div class="pbar">
                               <span style="width:50%"></span>                            
                            </div>
                        	<div>
                                <p class="left">Traffic</p> 
                                <p class="right">8,001 MB / 10 GB</p>
                            </div>
                            <div class="pbar">
                               <span style="width:81%"></span>                            
                            </div>
                        </div>  
                    </div> 
                     
                    <!-- CONTENT -->
                    
					<div id="content-main">
                        <div id="content-main-inner">

                            <div class="page-header">
                                <h2>Forms</h2>
                                <span class="page-helper">1.0</span>
                                <a href="forms.html" class="page-helper">Examples</a>
                                <p>Documentation about forms and form elements.</p>
                            </div> 
                                                     
                            <!-- Start grid -->
                            
                            <section class="g_1">

                                <div class="doc-wrap" id="doc-tabs">

                                    <ul class="etabs">
                                        <li class="etabs-active"><a href="#etab1">eContactForm</a></li>
                                        <li><a href="#etab2">eCheckbox/eRadio</a></li>
                                        <li><a href="#etab3">OsKeyboard</a></li>
                                        <li><a href="#etab4">eTextareaLimiter</a></li>
                                        <li><a href="#etab5">eClone</a></li>
                                        <li><a href="#etab6">eInputExpand</a></li>
                                        <li><a href="#etab7">eSelect</a></li>
                                        <li><a href="#etab8">eFile</a></li>
                                        <li><a href="#etab9">eChainedInputs</a></li>
                                        <li><a href="#etab10">eShowPassword</a></li>
                                        <li><a href="#etab11">Third-party</a></li>
                                    </ul>
                                    
                                    <div id="etab1" class="etabs-content">
                                        <div class="doc-intro">
                                            <h3>eContactForm</h3>
                                            <p>You can use this plugin for your contact forms, the plugin has a powerfull validation engine which has a lot of validation types (included a regex validation type so that you can use your own custom made validation type). You can choose between sending the form with AJAX or not.</p>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Basic</h3>
                                            <p>A powerfull AJAX contact form with valdiation.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                                                               
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;form id="formid" method="post" action="pathtofile.php"&gt;
       &lt;input type="text" name="" data-validation-type="present" data-validation-label="There is nothing here!" data-validation-minimum="5" data-validation-maximum="100" /&gt;
       &lt;input type="text" name="" data-validation-type="match" data-validation-match="test" data-validation-label="The value isn't correct!" /&gt;
       &lt;input type="text" name="" data-validation-type="regex" data-validation-regex="/^[A-Za-z ]+$/" data-validation-label="Letters are only allowed!" /&gt;
       ...
       ...
       ...
       &lt;input type="submit" value="Submit" class="button-text" /&gt;
    &lt;/form&gt;</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Usage Data Atributes (dataset)</h3>
                                            <p>Data atrributes are used by some of our custom plugins to set/get data.</p>
                                        </div>
        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">HTML5 data attributes</th>
                                                    <th scope="col">Element</th>
                                                    <th scope="col">Example</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>data-validation-type</td>
                                                    <td>input</td>
                                                    <td>present | url | email | numbers | date | letters | regex | password | match | ip</td>
                                                    <td>These are the validation types: present: checks if the field has any data(min en max can be set separately), url: checks for a valid url, email: checks for a valid email, date: checks for a valid date(00-00-0000), letters: allows only letters, regex: can be used if you want to check for a custom pattern, password: checks if both password are the same, match: can be used to validate a custom word or string or such, this is the same as the regex validation type, ip: checks for a valid ip adddress(255.255.255.255).</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>data-validation-label</td>
                                                    <td>input</td>
                                                    <td></td>
                                                    <td>This is used for the error indication text, if the field isn't valid you can set you own custom text, if u dont use this custom label it will use a default line, which you can set in the plugin options.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>data-validation-minimum</td>
                                                    <td>input</td>
                                                    <td></td>
                                                    <td>This is the minimum value that has to be present. This is used in combination with the present, letters, numbers and password validation type(s). Default is 0.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>data-validation-maximum</td>
                                                    <td>input</td>
                                                    <td></td>
                                                    <td>This is the maximum value that can be present. This is used in combination with the present, letters, numbers and password validation type(s).</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>data-validation-match</td>
                                                    <td>input</td>
                                                    <td></td>
                                                    <td>This can be used to validate a field with a fixed value. This is used in combination with the match validation type.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>data-validation-regex</td>
                                                    <td>input</td>
                                                    <td></td>
                                                    <td>This can be used to validate a field with custom regex pattern. This is used in combination with the regex validation type.</td>
                                                    <td>1.0</td>
                                                </tr>                                            
                                            </tbody>
                                        </table> 
    
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$('div#formid').eContactForm({
    labelError: 'This field is required!',
    labelSuccess: 'Your message has been send successfully!',
    labelFail: 'The form has not been send, please try it again!',
    keydown: true,
    useAjax: true 
	before: function(){ },
	after: function(){ }                              
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Default</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>labelError</td>
                                                    <td>string</td>
                                                    <td>This field is required!</td>
                                                    <td>Default valdidation message.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>labelSuccess</td>
                                                    <td>string</td>
                                                    <td>Your message has been send successfully!</td>
                                                    <td>Default send message.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>labelFail</td>
                                                    <td>string</td>
                                                    <td>The form has not been send, please try it again!</td>
                                                    <td>Default fail to send message.</td>
                                                    <td>1.0</td>
                                                </tr>                                               
                                                <tr>
                                                    <td>keydown</td>
                                                    <td>boolean</td>
                                                    <td>true</td>
                                                    <td>This will hide the error label of a field that has to be re-validated.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>useAjax</td>
                                                    <td>boolean</td>
                                                    <td>true</td>
                                                    <td>Use AJAX to send your form.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>before</td>
                                                    <td>function</td>
                                                    <td>function(){}</td>
                                                    <td>Callback function that runs at start.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>after</td>
                                                    <td>function</td>
                                                    <td>function(){}</td>
                                                    <td>Callback function that runs at the end.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                                                            
                                            </tbody>
                                        </table>
                                        
                                        <div class="section-header">
                                            <h3>Globally And Per-Call Overridable Options</h3>
                                            <p>This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: <mark>$.fn.pluginName.key = 'value';</mark></p>
                                        </div>                                        
                                    </div><!-- End tab --> 
                                    
                                    <div id="etab2" class="etabs-content">  
                                        <div class="doc-intro">
                                            <h3>eCheckbox/eRadio</h3>
                                            <p>This theme has a custom plugin that allows you to style each chechbox/radio button to match our theme(s), the checkbox plugin also has the mass toggle option, so that you can quickly select or de-select a large number of checkboxes. The plugins are pretty simple and they just have a couple of options.</p>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Basic</h3>
                                            <p>Checkbox buttons styling with mass toggle option.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                                                               
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;form class="sectionclassgoeshere"&gt;
    &lt;input type="checkbox" name=""/&gt;
    &lt;input type="checkbox" name=""/&gt;
    &lt;input type="checkbox" name=""/&gt;
    ...
    ...
    ...
    &lt;input type="checkbox" name="" class="triggerclassgoeshere"/&gt;
&lt;/form&gt;</pre>
                                        </div> 
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$('input[type="checkbox"]').eCheckbox({
    sectionClass: 'e-checkbox-section',
    triggerClass: 'e-checkbox-trigger',	
    toggleCallback: function(){}                                  
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Default</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>sectionClass</td>
                                                    <td>string</td>
                                                    <td>e-checkbox-section</td>
                                                    <td>The class used for the mass toggle section(all checkboxes in this wrapper/section can be toggled).</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>triggerClass</td>
                                                    <td>string</td>
                                                    <td>e-checkbox-trigger</td>
                                                    <td>This is the class for the mass toggle checkbox(master) switch.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>toggleCallback</td>
                                                    <td>function</td>
                                                    <td>function(){}</td>
                                                    <td>Callback function that runs if the mass select/un-select is used.</td>
                                                    <td>1.0</td>
                                                </tr>                                                
                                           </tbody>
                                       </table>

                                       <div class="section-header">
                                            <h3>Basic</h3>
                                            <p>Radio buttons styling.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                                                               
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;form&gt;
    &lt;input type="radio" name="demo"/&gt;
    &lt;input type="radio" name="demo"/&gt;
    &lt;input type="radio" name="demo"/&gt;
    ...
    ...
    ...
&lt;/form&gt;</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$('input[type="radio"]').eRadio();</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Default</th>
                                                    <th scope="col">Default</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td colspan="5">This plugin has no options.</td>
                                                </tr>
                                            </tbody>                                   
                                        </table>
                                        
                                        <div class="section-header">
                                            <h3>Globally And Per-Call Overridable Options</h3>
                                            <p>This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: <mark>$.fn.pluginName.key = 'value';</mark></p>
                                        </div>                                          
                                    </div><!-- End tab -->
                                    
                                    <div id="etab3" class="etabs-content">
                                    	<div class="doc-intro">
                                            <h3>OsKeyboard</h3>
                                            <p>Basic on screen keyboard plugin.</p>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Basic</h3>
                                            <p>On screen keyboard plugin.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                                                               
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;input type="text" id="eoskeyboard-id" /&gt;</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$('#eoskeyboard-id').eOsKeyboard({
    title:'OS Keyboard',
    trigger: 'focus',
    draggable: true,
    posY: 20,
    posX: 0,
    zIndex: 1000
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Default</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>title</td>
                                                    <td>string</td>
                                                    <td>OS Keyboard</td>
                                                    <td>The title of the OS keyboard.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>trigger</td>
                                                    <td>string</td>
                                                    <td>icon | focus</td>
                                                    <td>How the OS keyboard is triggerd, by an icon or when you click on a input(focus).</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>draggable</td>
                                                    <td>boolean</td>
                                                    <td>true</td>
                                                    <td>Allow the Oskeyboard to be draggable.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>posX</td>
                                                    <td>number(integer)</td>
                                                    <td>20</td>
                                                    <td>The position of the OS keyboard(vertical).</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>posY</td>
                                                    <td>number(integer)</td>
                                                    <td>0</td>
                                                    <td>The position of the OS keyboard(horizontal).</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>zIndex</td>
                                                    <td>number(integer)</td>
                                                    <td>1000</td>
                                                    <td>The z-index of the keyboard.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                                                               
                                           </tbody>                                    
                                       </table> 
                                       <div class="section-header">
                                            <h3>Globally And Per-Call Overridable Options</h3>
                                            <p>This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: <mark>$.fn.pluginName.key = 'value';</mark></p>
                                        </div>                                                                          
                                    </div><!-- End tab -->
                                    
                                    <div id="etab4" class="etabs-content">
                                        <div class="doc-intro">
                                            <h3>eTextarealimiter</h3>
                                            <p>This plugin uses the HTML5 attribute called 'maxlength' to get the max length value of a textarea. Not all browsers do support HTML5 so this plugin is usefull for browsers that dont support HTML5.</p>
                                        </div> 
                                                                            
                                        <div class="section-header">
                                            <h3>Basic</h3>
                                            <p>Textarea maxlimiter plugin.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                                                               
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;textarea id="textarea-limiter-id" maxlength="250" &gt;&lt;/textarea&gt;</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$("#textarea-limiter-id").eTextareaLimiter({
	maximum: 250,			
	savety: true,	
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Default</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>maximum</td>
                                                    <td>number(integer)</td>
                                                    <td>10000</td>
                                                    <td>The maximum of characters that are allowed in the textarea.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>savety</td>
                                                    <td>boolean</td>
                                                    <td>true</td>
                                                    <td>Disable the submit button if the textarea exceeds the limit(backup savety when somebody copy past a large piece of text thats larger then the limit).</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                                                  
                                           </tbody>                                           
                                        </table>
                                        
                                        <div class="section-header">
                                            <h3>Globally And Per-Call Overridable Options</h3>
                                            <p>This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: <mark>$.fn.pluginName.key = 'value';</mark></p>
                                        </div>                                                                               
                                    </div><!-- End tab --> 

                                    <div id="etab5" class="etabs-content">
                                        <div class="doc-intro">
                                            <h3>eClone</h3>
                                            <p>This is a simple plugin that clones a element. Best used for input fields(forms). As you can see in the example the plugin will always clone the last found element.</p>
                                        </div> 
                                                                            
                                        <div class="section-header">
                                            <h3>Basic</h3>
                                            <p>Simple cloning plugin.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                                                               
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;div class="clone-range"&gt;
    &lt;div&gt; 
    	&lt;input type="text" name=""/&gt;
    &lt;/div&gt;
    &lt;div&gt; 
    	&lt;input type="text" name=""/&gt;
    &lt;/div&gt;
    &lt;div&gt; 
    	&lt;input type="text" name=""/&gt;
    &lt;/div&gt;                                         
    &lt;div class="not-clone"&gt; 
    	&lt;a href="javascript:void(0);" class="clone-trigger"&gt;Add new row&lt;/a&gt;
    &lt;/div&gt;                                                                                                 
&lt;/div&gt;</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$("div.clone-range").eClone({
      target: 'div',
      trigger: '.clone-trigger',
      excludeClass: 'not-clone',
      effect: 'slide',
      speed: 200,
      before: function(){ },
      after: function(){ }
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Default</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>target</td>
                                                    <td>string</td>
                                                    <td>div</td>
                                                    <td>The element/part that should be cloned, notice that it will always clone the last found element in the cloning range.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>trigger</td>
                                                    <td>string</td>
                                                    <td>.clone-trigger</td>
                                                    <td>The class or id of the button which triggers the cloning progress.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>excludeClass</td>
                                                    <td>string</td>
                                                    <td>.not-clone</td>
                                                    <td>The class or id of the part in the cloning range that not should be cloned.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>effect</td>
                                                    <td>string</td>
                                                    <td>slide</td>
                                                    <td>The effect of the cloning, you can choose between 'slide' and 'fade'.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>speed</td>
                                                    <td>number(integer)</td>
                                                    <td>200</td>
                                                    <td>The speed of the effect.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>before</td>
                                                    <td>function</td>
                                                    <td>function(){}</td>
                                                    <td>Callback function that runs at start.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>after</td>
                                                    <td>function</td>
                                                    <td>function(){}</td>
                                                    <td>Callback function that runs at the end.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                 
                                            </tbody>                                           
                                        </table>
                                        <div class="section-header">
                                            <h3>Globally And Per-Call Overridable Options</h3>
                                            <p>This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: <mark>$.fn.pluginName.key = 'value';</mark></p>
                                        </div>                                                                               
                                    </div><!-- End tab --> 
                                                                   
                                    <div id="etab6" class="etabs-content">
                                        <div class="doc-intro">
                                            <h3>eInputExpand</h3>
                                            <p>Hook your text inputs to a popup textarea to maximize your workflow.</p>
                                        </div> 
                                                                            
                                        <div class="section-header">
                                            <h3>Basic</h3>
                                            <p>From input to textarea.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                                                               
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;input type="text" id="inputexpand" name="" /&gt;</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$('input#inputexpand').eInputExpand({
    width: 320,
    height: 220,
    labelSubmit: 'Insert',
    labelCancel: 'Cancel',
    opacity: 0.5,
    escKey: true,
    before: function(){ },
    after: function(){ }
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Default</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>width</td>
                                                    <td>number(integer)</td>
                                                    <td>320</td>
                                                    <td>The width of the popup box.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>height</td>
                                                    <td>number(integer)</td>
                                                    <td>220</td>
                                                    <td>The height of the popup box.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>labelSubmit</td>
                                                    <td>string</td>
                                                    <td>insert</td>
                                                    <td>The label of the submit/insert button.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>labelCancel</td>
                                                    <td>string</td>
                                                    <td>insert</td>
                                                    <td>The label of the cancel button.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>opacity</td>
                                                    <td>number(float)</td>
                                                    <td>0.5</td>
                                                    <td>The opacity of the overlay.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>opacity</td>
                                                    <td>boolean</td>
                                                    <td>true</td>
                                                    <td>Allow users to cancel with the ESC key.</td>
                                                    <td>1.0</td>
                                                </tr>                                                
                                                <tr>
                                                    <td>before</td>
                                                    <td>function</td>
                                                    <td>function(){}</td>
                                                    <td>Callback function that runs at start.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>after</td>
                                                    <td>function</td>
                                                    <td>function(){}</td>
                                                    <td>Callback function that runs at the end.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                 
                                            </tbody>                                           
                                        </table>
                                        <div class="section-header">
                                            <h3>Globally And Per-Call Overridable Options</h3>
                                            <p>This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: <mark>$.fn.pluginName.key = 'value';</mark></p>
                                        </div>                                                                               
                                    </div><!-- End tab -->  
                                    
                                    <div id="etab7" class="etabs-content">
                                        <div class="doc-intro">
                                            <h3>eSelect</h3>
                                            <p>Style your select elements(basic and multiple) the easy way.</p>
                                        </div> 
                                                                            
                                        <div class="section-header">
                                            <h3>Basic</h3>
                                            <p>Simple select styling.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                                                               
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;select&gt;
    &lt;option value=""&gt;-- select option --&lt;/option&gt;
    &lt;option value="a"&gt;Option 1&lt;/option&gt;
    &lt;option value="b"&gt;Option 2&lt;/option&gt;
    &lt;option value="c"&gt;Option 3&lt;/option&gt;
    &lt;option value="d"&gt;Option 4&lt;/option&gt;
    &lt;option value="e"&gt;Option 5&lt;/option&gt;
&lt;/select&gt;</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$('select').eSelect({
    exclude: '',
    speed: 200,
    onSelect: function(){ }	
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Default</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>exclude</td>
                                                    <td>string</td>
                                                    <td></td>
                                                    <td>You can exclude select elements by using the id or class of this element. Example: '#idname, .classname'.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>speed</td>
                                                    <td>number(integer)</td>
                                                    <td>200</td>
                                                    <td>The speed of the effect.</td>
                                                    <td>1.0</td>
                                                </tr>  
                                                <tr>
                                                    <td>onSelect</td>
                                                    <td>function</td>
                                                    <td>function(){}</td>
                                                    <td>Callback function that runs after you have selected a value.</td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                 
                                            </tbody>                                           
                                        </table>
                                        <div class="section-header">
                                            <h3>Globally And Per-Call Overridable Options</h3>
                                            <p>This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: <mark>$.fn.pluginName.key = 'value';</mark></p>
                                        </div>                                                                               
                                    </div><!-- End tab -->                                       
                                      
                                    <div id="etab8" class="etabs-content">
                                        <div class="doc-intro">
                                            <h3>eFile</h3>
                                            <p>Native file input styling made easy.</p>
                                        </div> 
                                                                            
                                        <div class="section-header">
                                            <h3>Basic</h3>
                                            <p>Simple file input styling.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                                                               
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;input type="file" name=""/&gt;</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$('input[type="file"]').eFile({
    label: 'upload',
    exclude: '',
    onUpload: function(){ }	
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Default</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>label</td>
                                                    <td>string</td>
                                                    <td>200</td>
                                                    <td>The speed of the effect.</td>
                                                    <td>1.0</td>
                                                </tr>                                              
                                                <tr>
                                                    <td>exclude</td>
                                                    <td>string</td>
                                                    <td></td>
                                                    <td>You can exclude select elements by using the id or class of this element. Example: '#idname, .classname'.</td>
                                                    <td>1.0</td>
                                                </tr>
                                                <tr>
                                                    <td>onUpload</td>
                                                    <td>function</td>
                                                    <td>function(){}</td>
                                                    <td>Callback function that runs after a file gets selected. </td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                 
                                            </tbody>                                           
                                        </table>
                                        <div class="section-header">
                                            <h3>Globally And Per-Call Overridable Options</h3>
                                            <p>This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: <mark>$.fn.pluginName.key = 'value';</mark></p>
                                        </div>                                                                               
                                    </div><!-- End tab -->
                                    
                                    <div id="etab9" class="etabs-content">
                                        <div class="doc-intro">
                                            <h3>eChainedInput</h3>
                                            <p>You can chain input fields to each other by using this plugin, the inputs grouped by using the attribute 'data-chained-group', and are triggerd by the 'maxlength' attribute.</p>
                                        </div> 
                                                                            
                                        <div class="section-header">
                                            <h3>Basic</h3>
                                            <p>An easy way to chain input to each other.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                                                               
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;input type="text" name="" data-chained-group="field1" maxlength="6"/&gt;
&lt;input type="text" name="" data-chained-group="field1" maxlength="16"/&gt;
&lt;input type="text" name="" data-chained-group="field1" maxlength="2"/&gt;</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Usage Data Atributes (dataset)</h3>
                                            <p>Data atrributes are used by some of our custom plugins to set/get data.</p>
                                        </div>
        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">HTML5 data attributes</th>
                                                    <th scope="col">Element</th>
                                                    <th scope="col">Example</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                            <tbody>
                                                <tr>
                                                    <td>data-chained-group</td>
                                                    <td>input</td>
                                                    <td></td>
                                                    <td>This data attribut connects the input to each other. All the input which you want to group should have an unique name.</td>
                                                    <td>1.0</td>
                                                </tr>                                           
                                            </tbody>
                                        </table> 

                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$('form').eChainedInput({
    callback: function(){ }	
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Default</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead> 
                                                <tr>
                                                    <td>callback</td>
                                                    <td>function</td>
                                                    <td>function(){}</td>
                                                    <td>Callback function that runs after the last input has reached it's maxlength. </td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                 
                                            </tbody>                                           
                                        </table>
                                        <div class="section-header">
                                            <h3>Globally And Per-Call Overridable Options</h3>
                                            <p>This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: <mark>$.fn.pluginName.key = 'value';</mark></p>
                                        </div>                                                                               
                                    </div><!-- End tab -->
                                    
                                    <div id="etab10" class="etabs-content">
                                        <div class="doc-intro">
                                            <h3>eShowPassword</h3>
                                            <p>Lightweight jQuery plugin that allows users to transform the password into a readable password.</p>
                                        </div> 
                                                                            
                                        <div class="section-header">
                                            <h3>Basic</h3>
                                            <p>An easy way to see what you are typing.</p>
                                        </div>
                                        
                                        <div class="spacer-15"><!-- spacer 15px --></div>
                                        
                                        <div class="section-header">
                                            <h3>How to use</h3>
                                            <p>How to use HTML elements.</p>
                                        </div>
                                                                                                               
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="htmlCode">&lt;input type="password" name="" id="password" /&gt;
...
...                                           
&lt;a href="javascript:void(0);" id="show-password"&gt;Show password &lt;/a&gt;
                                            </pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Usage plugin</h3>
                                            <p>How to use our custom made jQuery plugins.</p>
                                        </div>
                                                                                                              
                                        <div class="demo-code">
                                            <b>Markup</b>
                                            <span class="toggle-min"></span>
                                            <pre class="jsCode">$('#password').eShowPassword({
    trigger: '#show-password',
    exclude: '',
    onSwitch: function(){ }		
});</pre>
                                        </div> 
                                        
                                        <div class="section-header">
                                            <h3>Plugin options</h3>
                                            <p>Most of our custom made jQuery plugins have options/settings.</p>
                                        </div>
                                        
                                        <table class="doc-table">
                                            <thead>
                                                <tr>
                                                    <th scope="col">Plugin options</th>
                                                    <th scope="col">Type</th>
                                                    <th scope="col">Default</th>
                                                    <th scope="col">Desctription</th>
                                                    <th class="tbversion" scope="col">Since</th>
                                                </tr>                                            
                                            </thead>
                                                <tr>
                                                    <td>trigger</td>
                                                    <td>string</td>
                                                    <td></td>
                                                    <td>The trigger that toggles the inputs.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>exclude</td>
                                                    <td>string</td>
                                                    <td></td>
                                                    <td>You can exclude select elements by using the id or class of this element. Example: '#idname, .classname'.</td>
                                                    <td>1.0</td>
                                                </tr> 
                                                <tr>
                                                    <td>onSwitch</td>
                                                    <td>function</td>
                                                    <td>function(){}</td>
                                                    <td>Callback function that runs with evert click of the trigger. </td>
                                                    <td>1.0</td>
                                                </tr>                                                                                                 
                                            </tbody>                                           
                                        </table>
                                        <div class="section-header">
                                            <h3>Globally And Per-Call Overridable Options</h3>
                                            <p>This plugin has per-call(as the example above shows) and globally overridable options. Globally options can be used to override the default options, this is best used if you want to override the plugin options by default, this will prevent any issues with the plugin, as you dont have to change any thing in the plugin core it self. How to use: <mark>$.fn.pluginName.key = 'value';</mark></p>
                                        </div>                                                                               
                                    </div><!-- End tab -->
                                                                                                                                                                               
									<div id="etab11" class="etabs-content">
                                        <div class="doc-intro">
                                            <h3>Third-party plugins</h3>
                                            <p>Third-party plugins are not documented here because they have there own documentation.</p>
                                        </div> 
                                   
                                        <div class="section-header">
                                            <h3>Datepicker</h3>
                                            <p>jQuery UI datepicker plugin.</p>
                                        </div>
                                        
                                        <div class="tp-wrapper">
                                        This is a third party plugin, for options and how to use please visit <a href="http://jqueryui.com/demos/datepicker/">this site</a>.
                                        </div>  
                                        
                                        <div class="spacer-30"><!-- spacer 30px --></div>

                                        <div class="section-header">
                                            <h3>jQuery uploader</h3>
                                            <p>jQuery upload plugin.</p>
                                        </div>
                                        
                                        <div class="tp-wrapper">
                                        This is a third party plugin, for options and how to use please visit <a href="http://www.plupload.com/index.php">this site</a>.
                                        </div>                                 
                                        
                                        <div class="spacer-30"><!-- spacer 30px --></div>
    
                                        <div class="section-header">
                                            <h3>jQuery UI spinner</h3>
                                            <p>jQuery UI spinner input.</p>
                                        </div>
                                        
                                        <div class="tp-wrapper">
                                        This is a third party plugin, for options and how to use please visit 
                                        <a href="https://github.com/btburnett3/jquery.ui.spinner">this site</a>.
                                        </div>
                                        
                                        <div class="spacer-30"><!-- spacer 30px --></div>    

                                        <div class="section-header">
                                            <h3>jQuery UI autocomplete</h3>
                                            <p>jQuery UI autocomplete plugin.</p>
                                        </div>
                                        
                                        <div class="tp-wrapper">
                                        This is a third party plugin, for options and how to use please visit <a href="http://jqueryui.com/demos/autocomplete/">this site</a>.
                                        </div>  
                                        
                                        <div class="spacer-30"><!-- spacer 30px --></div>   

                                        <div class="section-header">
                                            <h3>Autogrow textarea</h3>
                                            <p>jQuery autogrow textarea plugin.</p>
                                        </div>
                                        
                                        <div class="tp-wrapper">
                                        This is a third party plugin, for options and how to use please visit <a href="../../github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.html">this site</a>.
                                        </div>  
                                        
                                        <div class="spacer-30"><!-- spacer 30px --></div>   

                                        <div class="section-header">
                                            <h3>Resizable textarea</h3>
                                            <p>jQuery Resizable textarea plugin.</p>
                                        </div>
                                        
                                        <div class="tp-wrapper">
                                        This is a third party plugin, for options and how to use please visit <a href="http://viralpatel.net/blogs/2009/06/textarea-resize-javascript-jquery-plugin-resize-textarea-html.html">this site</a>.
                                        </div>  
                                        
                                        <div class="spacer-30"><!-- spacer 30px --></div> 
                                                                                                                                                          
                                        <div class="section-header">
                                            <h3>UI Sliders</h3>
                                            <p>jQuery UI sliders.</p>
                                        </div>
    
                                        <div class="tp-wrapper">
                                        This is a third party plugin, for options and how to use please visit <a href="http://jqueryui.com/demos/slider/">this site</a>.
                                        </div>
                                        
                                        <div class="spacer-30"><!-- spacer 30px --></div>
    
                                        <div class="section-header">
                                            <h3>Select to UI slider</h3>
                                            <p>Slider that uses select fields.</p>
                                        </div>
                                        
                                        <div class="tp-wrapper">
                                        This is a third party plugin, for options and how to use please visit 
                                        <a href="http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/">this site</a>.
                                        </div>
                                        
                                        <div class="spacer-30"><!-- spacer 30px --></div>
    
                                        <div class="section-header">
                                            <h3>Masked input</h3>
                                            <p>Masked input plugin for inputs.</p>
                                        </div>
                                        
                                        <div class="tp-wrapper">
                                        This is a third party plugin, for options and how to use please visit 
                                        <a href="http://digitalbush.com/projects/masked-input-plugin/">this site</a>.
                                        </div>
                                    </div><!-- End tab -->
                                </div>  
                            </section>                           
                            
							<div class="clear"><!-- New row --></div>
                            
                            <!-- End grid -->
                                                   
                       </div><!-- End #content-main-inner --> 
                    </div><!-- End #content-main --> 
                </div><!-- End #content-inner --> 
                
                <!-- CONTENT FOOTER -->
                
                <footer id="content-footer">
                    <div class="left">
						<div class="left">
                               <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="folder-10 plix-10"></span>
                              </a>                                                        
                              <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="pencil-10 plix-10"></span>
                              </a>
                          </div><!-- End .left -->
                          <div class="right">
                              <a href="javascript:void(0);" class="button-icon tip-s" title="Some action">
                                  <span class="refresh-10 plix-10"></span>
                              </a> 
                          </div> <!-- End .right --> 
                    </div><!-- End .left --> 
                    <div class="right">
                    	<div class="left">
                    	Copyright © 2012 <a href="http://bit.ly/ldjfWQ">CreativeMilk</a>
                        </div><!-- End .left -->
                        <div class="right">
                        	<div class="theme-version">Version 1.0</div>
                        </div><!-- End .right -->
                    </div><!-- End .right -->                
                </footer><!-- End #content-footer -->                 
            </div><!-- End #content-border --> 
        </div><!-- End #content --> 
            
    </div><!-- End #container -->
    
    <!-- scroll to top link -->
    <div id="scrolltotop"><span></span></div> 
    
</body>
</html>